<template>
  <div class="filter">
    <t-drawer
      size="842px"
      :visible.sync="visible"
      :close-on-overlay-click="false"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <p class="chevron-left">
            <icon-font name="chevron-left" size="18px"/>
          </p>
          <h3>{{ header }}</h3>
        </div>
      </template>

      <template #footer>
        <div class="footer-btn">
          <!--<t-space size="24px">-->
            <t-button :theme="confirmBtn.theme" :loading="confirmBtn.loading" class="confirm-btn flex-1" @click="handleConfirm">
              {{ confirmBtn.content }}
            </t-button>
            <t-button theme="default" class="cancel-btn" @click="close">取消</t-button>
          <!--</t-space>-->
        </div>
      </template>
      <t-form :data="formData" :rules="rules" ref="form" label-align="top" @submit="onSubmit">
        <t-form-item name="product_id">
          <template #label>
            <p class="form-label">产品</p>
          </template>
          <t-select v-model="formData.product_id" :options="productOptions" filterable placeholder="请选择产品"></t-select>
        </t-form-item>
        <t-form-item v-if="!editId" name="sn">
          <template #label>
            <p class="form-label">序列号</p>
          </template>
          <t-input v-model="formData.sn" placeholder="请输入序列号"></t-input>
        </t-form-item>
        <t-form-item name="unit_id">
          <template #label>
            <p class="form-label">单位</p>
          </template>
          <t-select v-model="formData.unit_id" :options="unitOptions" placeholder="请选择单位"></t-select>
        </t-form-item>
        <!--<t-form-item name="group_id">-->
        <!--  <template #label>-->
        <!--    <p class="form-label">分组</p>-->
        <!--  </template>-->
        <!--  <t-select v-model="formData.group_id" :options="options" placeholder="请选择分组"></t-select>-->
        <!--</t-form-item>-->
        <!--<t-form-item name="sn_name">-->
        <!--  <template #label>-->
        <!--    <p class="form-label">别名</p>-->
        <!--  </template>-->
        <!--  <t-input v-model="formData.sn_name" placeholder="请输入别名"></t-input>-->
        <!--</t-form-item>-->
        <!--<t-form-item name="label_data">-->
        <!--  <template #label>-->
        <!--    <p class="form-label">标签</p>-->
        <!--  </template>-->
        <!--  <t-tag-input v-model="formData.label_data" placeholder="请输入标签"></t-tag-input>-->
        <!--</t-form-item>-->
        <t-form-item name="remark">
          <template #label>
            <p class="form-label">备注</p>
          </template>
          <t-textarea v-model="formData.remark" placeholder="请输入备注"></t-textarea>
        </t-form-item>
        <t-form-item name="sort">
          <template #label>
            <p class="form-label">排序</p>
          </template>
          <t-input-number v-model="formData.sort" style="width: 220px;" placeholder="排序"></t-input-number>
        </t-form-item>
      </t-form>
    </t-drawer>
  </div>
</template>

<script>
import UploadImg from "@/components/upload-img/index.vue";
import { IconFont } from "tdesign-icons-vue";
import {product_snCreateApi, product_snDetailApi, product_snEditApi} from "@/api/serial-number";
import {productListApi} from "@/api/product";
import {classifyListApi} from "@/api/classify";

export default {
  name: 'SerialAdd',
  components: {UploadImg, IconFont},
  data() {
    return {
      visible: false,
      header: '新增序列号',
      confirmBtn: {
        theme: 'primary',
        content: '保存',
        loading: false
      },
      formData: {
        p_sn_id: '', // 父snID 可选 示例值: 0
        product_id: '', // 产品ID 可选
        unit_id: '',  // 单位ID 可选
        group_id: '', // 分组ID 可选
        sn: '', // 序列号
        sn_name: '',  // 别名
        label_data: [], // 标签
        remark: '', // 备注
        sort: '',  // 排序
      },
      rules: {
        product_id: [{ required: true, message: '请选择产品', trigger: 'change' },],
        //unit_id: [{ required: true, message: '请选择单位', trigger: 'blur' },],
        //group_id: [{ required: true, message: '请选择分组', trigger: 'blur' },],
        sn: [{ required: true, message: '请输入序列号', trigger: 'blur' },],
        //sn_name: [{ required: true, message: '请输入别名', trigger: 'blur' },],
        //label_data: [{ required: true, message: '请输入标签', trigger: 'blur' },],
        //remark: [{ required: true, message: '请输入备注', trigger: 'blur' },],
        //sort: [{ required: true, message: '请输入排序', trigger: 'blur' },],
      },
      productOptions: [],
      unitOptions: [],
      editId: '',

      params: {
        page: 1,  // 当前页
        limit: 99999,  // 每页条数
      }
    }
  },
  methods: {
    handleConfirm() {
      this.$refs.form.submit()
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        this.handleSubmit()
      } else {
        this.$message.error(firstError);
      }
    },
    handleSubmit() {
      this.confirmBtn.loading = true
      this.confirmBtn.content = '保存中...'
      const requestApi = this.editId ? product_snEditApi : product_snCreateApi
      if (this.editId) {
        this.formData.id = this.editId
      }
      requestApi(this.formData).then(res => {
        this.$message.success(this.editId ? '修改成功' : '新增成功')
        this.$emit('refresh')
        this.close()
      }).finally(() => {
        this.confirmBtn.loading = false
        this.confirmBtn.content = '保存'
      })
    },
    // 获取列表
    getProductList() {
      productListApi(this.params).then(res => {
        this.productOptions = res.data.map(item=> ({
          label: item.title,
          value: item.id
        }))
      })
    },
    // 获取列表
    getUnitList() {
      classifyListApi({...this.params, belong_module: 'product_unit',}).then(res=> {
        this.unitOptions = res.data.map(item=> ({
          label: item.title,
          value: item.id
        }))
      })
    },
    getDetail() {
      product_snDetailApi({id: this.editId}).then(res => {
        this.formData = {
          p_sn_id: res.data.p_sn_id, // 父snID 可选 示例值: 0
          product_id: res.data.product_id, // 产品ID 可选
          unit_id: res.data.unit_id,  // 单位ID 可选
          group_id: res.data.group_id, // 分组ID 可选
          sn: res.data.sn, // 序列号
          sn_name: res.data.sn_name,  // 别名
          label_data: res.data.label_data, // 标签
          remark: res.data.remark, // 备注
          sort: res.data.sort,  // 排序
        }
        this.header = '编辑序列号'
      })
    },
    open(p_sn_id, row={}) {
      this.editId = row.id || ''
      this.formData = {
        p_sn_id: p_sn_id, // 父snID 可选 示例值: 0
        product_id: '', // 产品ID 可选
        unit_id: '',  // 单位ID 可选
        group_id: '', // 分组ID 可选
        sn: '', // 序列号
        sn_name: '',  // 别名
        label_data: [], // 标签
        remark: '', // 备注
        sort: 999,  // 排序
      }
      this.$refs.form.reset()
      if (this.editId) {
        this.getDetail()
      }
      this.visible = true
      this.getProductList()
      this.getUnitList()
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

.add-btn-wrap {
  padding-top: 24px;
  border-top: 1px solid #E1E1E1;
}

.add-btn {
  width: 140px;
  height: 42px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}

/deep/ .t-dialog__body {
  padding-top: 0;
  margin-top: var(--td-comp-paddingTB-l);
}

/deep/ .t-dialog__footer {
  height: 75px;
}

.footer-btn {
  //position: absolute;
  //left: 0;
  //right: 0;
  //bottom: 0;
  //z-index: 99;
  //width: 100%;
  //padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xxl);
  //background-color: #F9F9F9;
  //border-bottom: 1px solid #F9F9F9;

  display: flex;
  align-items: center;
  gap: 18px;

  .confirm-btn {
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    border-radius: var(--td-radius-medium);
  }

  .cancel-btn {
    width: 132px;
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    background-color: #B8B8B8;
  }
}
</style>
